/*------------------------------------
tabs
------------------------------------*/

// nav-group
.nav.nav-group {
  display: inline-block;
  > li {
    text-align: center;
    margin: 0 auto;
    float: left;
    .nav-link {
      display: block;
      padding: 1rem 2rem;
      color: $dark;

      @media screen and (prefers-color-scheme: dark) {
        color: $dark-mode-fg;
      }
    }
  }
  li {
    a {
      background: #f9f9f9;
      margin-right: -1px;
      border: 1px solid $canvas-color;

      @media screen and (prefers-color-scheme: dark) {
        background-color: $dark-mode-bg;
        color: $dark-mode-fg;
        border: 1px solid $dark-mode-canvas-color;
      }
    }
    a.active {
      background: $white;
      color: $primary-color;

      @media screen and (prefers-color-scheme: dark) {
        background-color: darken($color: $dark-mode-bg, $amount: 1);
      }
    }
    &:first-child {
      a {
        border-radius: 30px 0 0 30px;
      }
    }
    &:last-child {
      a {
        border-radius: 0 30px 30px 0;
      }
    }
  }
}

// nav-line

.nav-line {
  border-bottom: 1px solid $border-color;
  > li {
    .nav-link {
      display: block;
      padding: 1.5rem 3rem;
      color: $dark;
      border-bottom: 1px solid transparent;
      position: relative;
      bottom: -1px;
    }
    a.active {
      color: $primary-color;
      border-bottom: 1px solid $dark;
    }
  }
}

//nav-vertical

.nav-vertical {
  border-right: 1px solid $border-color;
  .nav-link {
    display: block;
    padding: 1rem 1rem;
    color: $dark;
    border-right: 1px solid transparent;
    position: relative;
    right: -1px;
  }
  i {
    position: relative;
    top: 5px;
  }
  a.active {
    color: $primary-color;
    border-right: 1px solid $dark;
  }
}

@media (max-width: 1024px) {
  .nav.nav-group > li .nav-link,
  .nav.nav-line > li .nav-link {
    padding: 0.6rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .nav-vertical {
    margin-bottom: 2rem;
  }
}

// nav-tabs
.nav-tabs {
  @media screen and (prefers-color-scheme: dark) {
    border-color: $dark-mode-gray-darker;
    .nav-link {
      color: $dark-mode-fg !important;
      &.active {
        background-color: inherit;
        border-color: $dark-mode-gray-darker;
      }
    }
  }
}
